<template>
  <div>
    <van-row>
      <van-col span="24" style="height: 46px;">
        <van-nav-bar fixed >
          <van-icon name="arrow-left" slot="left" size="34px" color="#101010" @click="onClickLeft"></van-icon>
          <span slot="title" style="font-size: 18px">自定义训练</span>
        </van-nav-bar>
      </van-col>
    </van-row>
    <div>
      <div class="box">
        <div class="mag">
          <h2 class="item-name">胸部</h2>
          <div class="tar-box">
            <div v-for="(item , i) in items1" class="item-box" :class="{'actives1':active1==item}" @click="handle1(item,i)">{{item.name}}</div>
          </div>
        </div>
        <div  class="mag">
          <h2 class="item-name">时间</h2>
          <div class="tar-box">
            <div v-for="(item , i) in items2" class="item-box" :class="{'actives2':active2==item}" @click="handle2(item,i)">{{item.name}}</div>
          </div>
        </div>
        <div class="mag">
          <h2 class="item-name">难度</h2>
          <div class="tar-box">
            <div v-for="(item , i) in items3" class="item-box" :class="{'actives3':active3==item}" @click="handle3(item,i)">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 40px">
      <div class="find-box">
        <van-button type="primary" size="large" class="find-btn" @click="infind()">查找训练</van-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name:'freetra',
    data() {
      return {
        active1:'',
        active2:'',
        active3:'',
        find:'',
        items1: [
          {
            name: '部位不限',
            active: 'all'
          },
          {
            name: '胸部',
            active: 'chest'
          },
          {
            name: '背部',
            active: 'back'
          },
          {
            name: '肩部',
            active: 'shoulder'
          },
          {
            name: '手臂',
            active: 'arms'
          },
          {
            name: '腿部',
            active: 'legs'
          },
          {
            name: '臀部',
            active: 'buttocks'
          },
          {
            name: '腹部',
            active: 'abdomen'
          },
          {
            name: '全身',
            active: 'whole'
          },
          {
            name: '拉伸',
            active: 'stretching'
          },
          {

          }
        ],
        items2: [
          {
            name: '时间不限',
            active: 'all'
          },
          {
            name: '<10分钟',
            active: 'more10'
          },
          {
            name: '10~20分钟',
            active: '10to20'
          },
          {
            name: '20~30分钟',
            active: '20to30'
          },
          {
            name: '>30分钟',
            active: 'less30'
          },
          {}
          ],
        items3: [
          {
            name: '难度不限',
            active: 'all'
          },
          {
            name: '初级',
            active: 'first'
          },
          {
            name: '中级',
            active: 'medium'
          },
          {
            name: '高级',
            active: 'high'
          },
          {
          }
        ],

      }

  }

    ,
    methods:{
      onClickLeft(){
        this.$router.go(-1)
      },
      handle1(item,i){
        this.active1 = item
        console.log(name)
      },
      handle2(item,i){
        this.active2 = item;
        console.log(name)
      },
      handle3(item,i){
        this.active3 = item;
        console.log(name)
      },
      infind(){
        let ac1=this.active1.active
        let ac2=this.active2.active
        let ac3=this.active3.active
        this.find=[ac1,ac2,ac3]
        let finds=this.find
        console.log(finds)
      }
    }
  }
</script>
<style scoped="">
  .box{box-sizing: border-box;padding: 0 25px;text-align: center}
  .tar-box{
    display: flex;justify-content: space-between; flex-wrap:wrap;;
  }
  .item-box{
    height: 30px;width: 103px;flex-shrink:0;margin-top: 5px;line-height: 30px;background: #F3F3F4 ;
  }

  .item-box:last-child{background: none;height: 0;width: 103px}
  .actives1{background: black;color: white}
  .actives2{background: black;color: white}
  .actives3{background: black;color: white}
  .mag{margin-top: 28px}
  .find-btn{
    height: 40px;line-height: 40px;background: black;color: white;font-size: 12px;border: 0;
  }
  .find-box{
    position: fixed;left: 0;bottom: 0;width: 100%;
  }
</style>
